<template>
  <div>
      <div class="selectbook">
        <div class="selectbox">
            <div class="selecttype">最新创作</div>
            <div class="bottom"></div>

        </div>
        <div class="selectbox">
            <div class="selecttype">热门创作</div>


        </div>

    </div>

    <div class="bookpage">
        <div id="pages">
            <ul>
                <li v-for="user in users" :key="user.id">
                    <img :src="user.img" alt="">
                    <div class="rightbox">
                        <div class="topbox">
                            <span class="username">{{user.name}}</span>
                            <span class="usertime">{{user.time}}</span>
                        </div>
                        <div class="useranswer">{{user.answer}}</div>

                    </div>
                    <button class="answerBtn1">忽略该问题</button>
                    <button class="answerBtn2">点击查看/回答问题</button>
                </li>
            </ul>

            <!--  这里绑定总页数    父组件传过来参数 复用件接收后判断如果为true执行css样式  -->
           

        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            users: [{
                        id: 1,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 2,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 3,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 4,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 5,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 6,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 7,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 8,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 9,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 10,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    }, {
                        id: 11,
                        name: '学生甲',
                        img: '../img/tx.png',
                        answer: '我是一个问题',
                        time: '2021-05-26 12:04'
                    },

                ],
                uPage: 1, //当前页
                perPage: 10, //每页显示多少条
             booktype: ['诗歌', '自然', '绘本', '童话', '神话', '文史', '教学', '小说', '名著', '名人传记', ]
        }
    },
    // created(){
    //     if(this.$router=this.$route){
    //         alert('1');
    //     }
    // }
}
</script>

<style scoped>
@import'../assets/css/answer.css';
</style>